import { Component, OnInit, ElementRef } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from "@angular/animations";
@Component({
  selector: 'app-adopt',
  templateUrl: './adopt.component.html',
  styleUrls: ['./adopt.component.css'],
  animations: [
    trigger("myInsertRemoveTrigger", [
      transition(":enter", [
        style({
          opacity: 0,
          height: 0

        }),
        animate("0.5s",
          style({
            opacity: 1,
            height: "650px"
          }))
      ]),
      transition(":leave", [
        style({
          opacity: 1,

        }),
        animate("0.5s",
          style({
            opacity: 0,
            height: 0
          }))])
    ])
  ]
})
export class AdoptComponent implements OnInit {

  constructor(private elementRef: ElementRef) { }


  ngOnInit() {
  }
  change: boolean = false;//打开关闭状态
  container: any = null;//获取组件元素
  index: number = 0;//当前图标位置
  state: number = 0;//0为关闭 1为打开 2为缩小
  width: number = 900;//组件的宽度
  height: number = 650;//组件的高度
  hide: boolean = false;//组件放大缩小状态
  left: string = "50%";
  top: string = "50%";
  close() {
    this.change = false;
    this.hide = false;
    this.state = 0;
    this.top = "50%";
    this.left = "50%";
  }
  toSmall() {
    this.container = this.elementRef.nativeElement.querySelector('.adopt-al');
    this.small();
  }
  show(e) {
    if (this.state == 0) {
      this.index = e;
      this.change = true;
      this.hide = true;
      this.state = 1;

    } else if (this.state == 2) {
      this.hide = true;
      this.state = 1;
      setTimeout(() => {
        if (this.top == "50%") {
          this.container.style.transform = "translate(-50%,-50%)";
        }
        this.container.style.top = this.top;
        this.container.style.left = this.left;
        this.container.style.width = this.width + "px";
        this.container.style.height = this.height + "px";

      }, 100);
    }
    setTimeout(() => {

      this.drop();
    }, 200)
  }
  small() {
    this.state = 2;
    this.container.style.transition = "all 1s";
    this.container.style.width = 0;
    this.container.style.height = 0;
    this.container.style.transform = "translate(0,0)";
    this.container.style.top = document.body.clientHeight - 46 + "px";
    this.container.style.left = 72 + 42 * (1 + this.index) - 30 + "px";
    setTimeout(() => {
      this.hide = false;
    }, 1000);
  }

  drop() {

    this.container = this.elementRef.nativeElement.querySelector(".adopt-al");

    let self = this;

    this.container.addEventListener("dragstart", function (ev) {
      self.container.style.transition = "all 0s";
      self.container.style.transform = "translate(0,0)";
      if (!self.container.style.left) {
        let height = document.body.clientHeight / 2;
        let width = document.body.clientWidth / 2;
        self.container.style.left = width - 450 + "px";
        self.container.style.top = height - 325 - 50 + "px";
      }
      this.left = self.container.style.left.substring(
        0,
        self.container.style.left.length - 2
      );
      this.top = self.container.style.top.substring(
        0,
        self.container.style.top.length - 2
      );
      this.left = ev.clientX - this.left;
      this.top = ev.clientY - this.top;
      var img = new Image();
      img.src =
        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
      ev.dataTransfer.setDragImage(img, 0, 0);
    });
    this.container.addEventListener("drag", function (e) {
      self.container.style.transition = "all 0s";
      self.container.style.left = e.pageX - this.left + "px";
      self.container.style.top = e.pageY - this.top + "px";
    });
    this.container.addEventListener("dragend", function (e) {

      self.container.style.transform = "translate(0,0)";
      self.container.style.left = e.pageX - this.left + "px";
      self.container.style.top = e.pageY - this.top + "px";
      self.left = self.container.style.left;
      self.top = self.container.style.top;
    });
  }

}
